<template>
    <div class="select-city-container-index">
        <div class="select-city-container-index-header">
            <nut-searchbar v-model="searchValue" placeholder="请输入城市名称" clearable>
                <template v-slot:leftin>
                    <Search2 size="14" />
                </template>
            </nut-searchbar>
            <div class="drawer" v-if="searchValue.length > 0">
                <HotCity @clickItem="onChangeItem" :list="searchList" v-if="searchList.length" title="当前搜索城市"></HotCity>
                <nut-empty description="无数据" v-else></nut-empty>
            </div>
        </div>
        <div style="height: 20px;"></div>
        <div class="select-city-container-index-hot">
            <HotCity @clickItem="onChangeItem" :list="[currentCityinfo]" title="当前定位城市"></HotCity>
        </div>
        <div style="height: 10px;"></div>
        <div class="select-city-container-index-hot">
            <HotCity @clickItem="onChangeItem" :list="hotCityData" title="热门城市"></HotCity>
        </div>
        <div style="height: 50px;"></div>
        <div class="select-city-container-index-Elevator">
            <Elevator @clickItem="onChangeItem"></Elevator>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import { Search2 } from '@nutui/icons-vue-taro';
import { storeToRefs } from "pinia";
import Taro, { useDidShow } from '@tarojs/taro';
import HotCity from './hot-city/index'
import Elevator from './city-elevator/index'
import { useLocationStore } from "../../store";
const locationStore = useLocationStore();
const sourceUrl = ref("")
const { hotCityData, currentCityinfo } = storeToRefs(locationStore);
const searchValue = ref("")
const searchList = ref([])
watch(searchValue, (newValue) => {
    searchList.value = locationStore.allCitydata.filter(
        (city: any) => {
            return city.cityName.includes(newValue);
        }
    );
});
//模板渲染
onMounted(() => {
    const instance: any = Taro.getCurrentInstance();
    if (instance.router.params.url) {
        sourceUrl.value = decodeURIComponent(instance.router.params.url);
    }
});
//改变选择城市的按钮
const onChangeItem = (item) => {
    locationStore.setSelectCityinfo(item);
    toSourceUrl();
};
//返回跳转过来的页面 逻辑
const toSourceUrl = () => {
    const url = sourceUrl.value;
    if (!url) {
        Taro.navigateBack();
        return;
    }
    const tabbarPageList = [
        "/pages/home/index",
        "/pages/cinema/index",
        "/pages/order/index",
        "/pages/my/index",
    ];
    if (tabbarPageList.includes(url)) {
        Taro.switchTab({
            url: sourceUrl.value,
        });
    } else {
        Taro.redirectTo({
            url: sourceUrl.value,
        });
    }
};
</script>
<style lang="less">
.select-city-container-index {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    background-color: #f3f3f4;

    .select-city-container-index-header {
        position: relative;

        .drawer {
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background-color: #fff;
            box-shadow: 0 10px 10px -4px rgba(0, 0, 0, 0.1);
            border-radius: 0 0 10px 10px;
            padding: 10px;
            padding-bottom: 50px;
            z-index: 5;
        }


    }

    .select-city-container-index-hot {
        padding: 0 20px;
    }

    .select-city-container-index-Elevator {
        flex: 1;
        background-color: #fff;
        /* 允许内容滚动 */
    }

}
</style>